<template>
  <div class="box">
    <div class="movie-tabs">
      <ul class="movie-tabs-list">
        <li
          v-for="(e, i) in movieTitle"
          @click="getclick(e.activeNum)"
          :key="i"
          :class="e.activeNum == active ? 'active-list' : ''"
        >
          {{ e.name }}
        </li>
      </ul>
      <!--  -->
      <div class="content-item" v-show="active == 0">
        <comp-playmovie :moviesData="movieData"></comp-playmovie>
      </div>
      <div class="content-item playbuy" v-show="active == 1">
        <comp-playbuy :movieBuy="movieBuy"></comp-playbuy>
        <div>
          <comp-playfilm :cinemas="playfilm"></comp-playfilm>
        </div>
      </div>
      <div class="content-item" v-show="active == 2">
        <comp-playnextmovie :movieNext="movieNext"></comp-playnextmovie>
      </div>
    </div>
    <!-- <div class="loading" v-if="loadState == false">
      <p class="text-flowLight">正在加载...</p>
    </div> -->
    <!-- 底部 -->
    <comp-footer></comp-footer>
  </div>
</template>
<script>
import CompFooter from "../components/comp-footer.vue";
import searchTxt from "../components/comp-searchtxt.vue";
import compPlaymovie from "../components/comp-playmovie.vue";
import compPlaynextmovie from "../components/comp-playnextmovie.vue";
import compPlaybuy from "../components/comp-playbuy.vue";
import compPlayfilm from "../components/comp-playfilm.vue";

export default {
  name: "Movie",
  data() {
    return {
      active: 0,
      movieData: [], //热
      movieNext: [], //待
      movieBuy: [], //影院
      playfilm: [],
      movieTitle: [
        { name: "热映", activeNum: 0 },
        { name: "影院", activeNum: 1 },
        { name: "待映", activeNum: 2 },
      ],
    };
  },
  components: {
    CompFooter,
    searchTxt,
    compPlaymovie,
    compPlaynextmovie,
    compPlaybuy,
    compPlayfilm,
  },
  methods: {
    getData() {
      this.loadState = false;
      let pro = axios.get("index/moreComingList", {
        params: {
          // ci: 1,
          // limit: 10,
          movieIds:
            "1363244,1331230,1417305,1199023,246968,1236599,1370269,1280799,1285684,1370983",
          // movieIds:
          //   "1280794,1291076,1352665,1298520,1230347,1443761,1355028,1250708,1404730,1397684",
        },
      });
      pro
        .then((res) => {
          // setTimeout(() => {
            this.loadState = true;
            // console.log(res);
            this.movieData = res.coming;
          // }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    getData1() {
      this.loadState = false;
      let pro = axios.get("index/moreComingList", {
        params: {
          // ci: 1,
          // limit: 10,
          // movieIds:
          //   "1363244,1331230,1417305,1199023,246968,1236599,1370269,1280799,1285684,1370983",
          movieIds:
            "1280794,1291076,1352665,1298520,1230347,1443761,1355028,1250708,1404730,1397684",
        },
      });
      pro
        .then((res) => {
          // setTimeout(() => {
            this.loadState = true;
            // console.log(res);
            this.movieNext = res.coming;
          // }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    // 影院  附近影院筛选条件
    getDataMovieBuy() {
      this.loadState = false;
      let pro = axios.get("index/filterCinemas", {
        params: {
          ci: 1,
        },
      });
      pro
        .then((res) => {
          setTimeout(() => {
            this.loadState = true;
            for (let key in res) {
              if (res[key] != null) {
                this.movieBuy.push(res[key]);
              }
              // console.log("n----->", n);
            }
            // console.log("去除null--->", this.movieBuy);
          }, 1000);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //影院
    getDataMovie() {
      this.loadState = false;
      let pro = axios.get("index/moreCinemas", {
        params: {
          day: "2021-12-21",
          ci: 1,
          offset: 0,
          limit: 10, // 10  20  30  触底加载
          //  districtId:1165
        },
      });
      pro
        .then((res) => {
          this.loadState = true;
          this.playfilm = res;
          // console.log("购票---->", this.cinemas);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //
    getclick(k) {
      console.log(k);
      this.active = k;
    },
  },
  created() {
    if (this.$route.query.num) {
      this.active = this.$route.query.num;
    }
    // 热映数据
    this.getData();
    // 待映数据
    this.getData1();
    // 影院选项数据
    this.getDataMovieBuy();
    // 影院数据
    this.getDataMovie();
    // console.log(this.$route.query.num);
  },
  mounted() {
    this.$forceUpdate();
  },
};
</script>

<style lang="scss" scoped>
.movie-tabs {
  width: 100%;
  .movie-tabs-list {
    width: 100%;
    height: 44px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    background: #dd403b;
    z-index: 99;
    top: 0;
    li {
      height: 100%;
      line-height: 44px;
      font-size: 18px;
      border-bottom: 1px solid transparent;
      box-sizing: border-box;
      color: #fff;
    }
  }
}
.active-list {
  border-bottom: 2px solid rgb(248, 248, 248) !important;
  animation: movies 0.6s;
}
.content-item {
  margin: 44px auto 60px;
}
.playbuy {
  margin-top: 100px;
}
@keyframes movies {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
// 动画
.loading {
  width: 100px;
  height: 30px;
  border-radius: 7px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.3);
}
.text-flowLight {
  position: relative;
  width: 100px;
  text-align: center;
  line-height: 30px;
  background-image: -webkit-linear-gradient(
    left,
    #b1c0ff,
    #b3ffb3,
    #ffbaba 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 2s forwards linear infinite;
  font-weight: 700;
  white-space: nowrap;
  font-size: 16px;
}
@keyframes masked-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}
</style>